<template>
	<view class="indexs">
		<view class="header header_wi" :style="'padding-top: ' + navH + 'px;'">
			<view class="header_height" :style="'height:' + gaodu + 'px;line-height:' + gaodu + 'px;top:' + gaodutops + 'px;'">
				<view class="index_h_cont3">
					<view class="index_wenben_img" @tap="jumpzuo"><image :src="imgUrl + '/dzx_img33.png'" mode="widthFix"></image></view>
					<view class="index_wenben">{{ $t('page_my_huikuan_pinzheng.Upload_certificate') }}</view>
				</view>
			</view>
			<view class="coloe_title">s</view>
		</view>
		<view class="index_center" :style="'padding-top:' + (navH + 50) + 'px;padding-bottom: 130rpx;'">
			<view class="my_huikuan_center">
				<view class="my_huikuan_pinzheng_item1">
					<view class="my_huikuan_item1_title">
						<image :src="imgUrl + '/dzx_img137.png'"></image>
						<text>{{ $t('page_my_huikuan_pinzheng.Please_upload_the_voucher') }}</text>
					</view>
					<view class="my_huikuan_pinzheng_item1_list">
						<view class="my_huikuan_pinzheng_item1_cont" v-if="setting.is_liushui == 1">
							<view class="my_huikuan_pinzheng_item1_t1">
								<text>*</text>
								{{ $t('page_my_huikuan_pinzheng.order_number') }}
							</view>
							<view class="my_huikuan_pinzheng_item1_input">
								<input type="text" data-field="ordersn" @input="toGetInput" :placeholder="$t('page_my_huikuan_pinzheng.p_order_number')" />
							</view>
						</view>
						<view class="my_huikuan_pinzheng_item1_cont" v-if="setting.is_jine == 1">
							<view class="my_huikuan_pinzheng_item1_t1">
								<text>*</text>
								{{ $t('page_my_huikuan_pinzheng.recharge_amount') }}
							</view>
							<view class="my_huikuan_pinzheng_item1_input">
								<input type="number" data-field="amount" @input="toGetInput" :placeholder="$t('page_my_huikuan_pinzheng.pleas_enter_recharge_amount')" />
							</view>
						</view>
						<view class="my_huikuan_pinzheng_item1_cont" v-if="setting.is_yinhang == 1">
							<view class="my_huikuan_pinzheng_item1_t1">
								<text>*</text>
								{{ $t('page_my_huikuan_pinzheng.recharge_bank') }}
							</view>
							<picker @change="bindPickerChange" :value="index" :range="banklist">
								<view class="my_huikuan_pinzheng_item1_input">
									<text>{{ banklist[index] }}</text>
									<view class="my_querendb_item2_xuanze"><image :src="imgUrl + '/dzx_img133.png'"></image></view>
								</view>
							</picker>
						</view>
						<view class="my_huikuan_pinzheng_item1_cont" v-if="setting.is_bizhong == 1">
							<view class="my_huikuan_pinzheng_item1_t1">
								<text>*</text>
								{{ $t('page_my_huikuan_pinzheng.Recharging_currency') }}
							</view>
							<picker @change="bindCoinChange" :value="coinIndex" :range="coinlist">
								<view class="my_huikuan_pinzheng_item1_input">
									<text>{{ coinlist[coinIndex] }}</text>
									<image :src="imgUrl + '/dzx_img133.png'"></image>
								</view>
							</picker>
						</view>
						<view class="my_huikuan_pinzheng_item1_cont" v-if="setting.is_chongzhidate == 1">
							<view class="my_huikuan_pinzheng_item1_t1">
								<text>*</text>
								{{ $t('page_my_huikuan_pinzheng.recharge_date') }}
							</view>
							<view class="my_huikuan_pinzheng_item1_input" @click="onShowDatePicker('datetime')">
								<input type="text" data-field="date" @input="toGetInput" :placeholder="$t('page_my_huikuan_pinzheng.p_recharge_date')" :value="datetime" />
								<button
									style="
                    position: relative;
                    width: 30px;
                    height: 21px;
                    padding-left: 64px;
                  "
								>
									<image :src="imgUrl + '/dzx_img133.png'" style="position: absolute; right: 0px"></image>
								</button>
							</view>
							<mx-date-picker :show="showPicker" :type="type" :value="value" :show-seconds="true" @confirm="onSelected" @cancel="onSelected" />
						</view>
						<view class="my_huikuan_pinzheng_item1_cont" v-if="setting.is_pingzhengimage == 1">
							<view class="my_huikuan_pinzheng_item1_t1">
								<text>*</text>
								{{ $t('page_my_huikuan_pinzheng.Upload_certificate') }}
							</view>
							<view class="my_huikuan_pinzheng_item1_imglist" @click="toSelectImage()">
								<view v-for="item in imageSrc" :key="index" class="cangkuyuan_saomaruku_item2_r5_img"><image :src="item"></image></view>
								<view class="my_huikuan_pinzheng_item1_imgcont"><image :src="imgUrl + '/dzx_img59.png'"></image></view>
							</view>
						</view>
					</view>
				</view>
				<view class="baoguo_btns">
					<view class="baoguo_btns_posi">
						<view class="baoguo_btn" @tap="postSubmit">{{ $t('page_my_huikuan_pinzheng.submit') }}</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
import MxDatePicker from '@/components/mx-datepicker/mx-datepicker.vue';
// pages/shouye/shouye_zkc/shouye_zkc.js
const app = getApp();
let request = require('../../../utils/require');

export default {
	components: {
		MxDatePicker
	},
	data() {
		return {
			navH: app.globalData.navHeight,
			gaodu: app.globalData.height,
			gaodutops: app.globalData.top,
			imgUrl: app.globalData.imgUrl,
			index: 0,
			coinIndex: 0,
			datetime: '',
			showPicker: false,
			value: '',
			coinlist: ['人民币', '新币', '美元', '欧元', '日元', '韩元', '其他'],
			banklist: [
				'未选择银行',
				'中国银行',
				'中国工商银行',
				'中国农业银行',
				'中国建设银行',
				'中国邮政储蓄银行',
				'中国交通银行',
				'中国招商银行',
				'中国兴业银行',
				'中国浦发银行',
				'中国民生银行',
				'中国中信银行',
				'中国华夏银行',
				'中国平安银行',
				'中国广发银行',
				'中国光大银行',
				'中国浙商银行',
				'其他地方银行'
			],
			imageSrc: [],
			imageIds: [],
			setting: ''
		};
	},
	/**
	 * 生命周期函数--监听页面加载
	 */ onLoad() {
		var that = this;
	},
	onShow() {
		var that = this;
		this.getbanksetting();
	},
	/**
	 * 生命周期函数--监听页面初次渲染完成
	 */
	onReady: function() {},
	/**
	 * 生命周期函数--监听页面隐藏
	 */
	onHide: function() {},
	/**
	 * 生命周期函数--监听页面卸载
	 */
	onUnload: function() {},
	/**
	 * 页面相关事件处理函数--监听用户下拉动作
	 */
	onPullDownRefresh: function() {},
	/**
	 * 页面上拉触底事件的处理函数
	 */
	onReachBottom: function() {},
	/**
	 * 用户点击右上角分享
	 */
	onShareAppMessage: function() {},
	methods: {
		getbanksetting() {
			var that = this;
			var url = 'index.php?s=/api/page/getbanksetting';
			var data = {};
			request.post(url + `&wxapp_id=` + uni.getStorageSync('web_id'), data).then(res => {
				console.log(res.data.data, '4444');
				if (res.data.code == 1) {
					that.setting = res.data.data
				}
			});
		},
		jumpzuo() {
			uni.navigateBack();
		},
		toGetInput(e) {
			var field = e.currentTarget.dataset.field;
			switch (field) {
				case 'ordersn':
					this.ordersn = e.detail.value
					break;
				case 'amount':
				    this.amount = e.detail.value
					break;
				case 'date':
					this.date = e.detail.value
					break;
			}
		},
		//选择仓库
		bindPickerChange: function(e) {
			console.log('picker发送选择改变，携带值为', e.detail.value);
			this.index = e.detail.value
		},
		toSelectImage() {
			var that = this;
			uni.chooseImage({
				count: 30, // 最多可以选择的图片张数，默认9
				sizeType: ['original', 'compressed'], //original 原图，compressed 压缩图，默认二者都有
				sourceType: ['album', 'camera'], //album 从相册选图，camera 使用相机，默认二者都有。如需直接开相机或直接选相册，请只使用一个选项
				success: function(res) {
						//判断图片格式
						uni.showLoading({
							title:'上传中...'
						})
						console.log(res)
						for(var i=0;i<res.tempFiles.length;i++){
							if(res.tempFiles[0]['size']>5*1024*1024){
								uni.showToast({
									title: '图片大小不能超过5M',
									icon: 'none',
									duration: 3000
								});
								return;
							}
							that.uploadImgFile(res.tempFiles[0],that)
						}	
					}
				});
		},
		uploadImgFile(filePath) {
			var that = this;
			uni.uploadFile({
				url: app.globalData['url'] + '/index.php?s=/api/upload/image&wxapp_id=' + uni.getStorageSync('web_id') + '&token=' + uni.getStorageSync('token'),
				filePath: filePath.path,
				name: 'iFile',
				success: response => {
					let res = JSON.parse(response.data);
					uni.hideLoading();
					if (res.code == 1) {
						that.imageSrc.push(res.data.file_path);
						that.imageIds.push(res.data.file_id);
					}
					console.log(that.imageSrc, '--666--res');
				},
				fail: err => {
					uni.hideLoading();
					console.log('请求失败_______________', err);
				}
			});
		},
		bindCoinChange: function(e) {
			console.log('picker发送选择改变，携带值为', e.detail.value);
			this.coinIndex = e.detail.value
		},
		onShowDatePicker(type) {
			//显示
			this.type = type;
			this.showPicker = true;
			this.value = this[type];
		},
		onSelected(e) {
			//选择
			this.showPicker = false;
			if (e) {
				this[this.type] = e.value;
				console.log(e, 7777);
				//选择的值
				console.log('value => ' + e.value);
				//原始的Date对象
				console.log('date => ' + e.date);
			}
		},
		postSubmit() {
			var that = this;
			var data = {
				token: uni.getStorageSync('token'),
				order_sn: this.ordersn,
				amount: this.amount,
				bank_name: this.banklist[this.index],
				coin_type: this.coinIndex,
				dates: this.datetime,
				imageIds: this.imageIds
			};
			if (!data.order_sn && that.setting.is_liushui == 1) {
				uni.showToast({
					title: '请输入银行流水单号',
					icon: 'none'
				});
				return;
			}
			console.log(that.setting);
			if (!data.amount && that.setting.is_jine == 1) {
				uni.showToast({
					title: '请输入金额',
					icon: 'none'
				});
				return;
			}
			var url = 'index.php?s=/api/user/certificate';
			request.post(url + `&wxapp_id=` + uni.getStorageSync('web_id'), data).then(function(res) {
				if (res.data.code == 1) {
					console.log(res, 'add');
					uni.showToast({
						title: res.data.data
					});
					setTimeout(() => {
						uni.navigateBack({
							delta: 0
						});
					}, 1000);
				} else {
					uni.showToast({
						title: res.data.msg,
						icon: 'none'
					});
				}
			});
		}
	}
};
</script>
<style>
@import './my_huikuan_pinzheng.css';
</style>
<style>
.test {
	text-align: center;
	padding: 10px 0;
}
button {
	margin: 0rpx;
	font-size: 28rpx;
	padding: 0px;
}
</style>
